<template>
  <div>
    <el-dialog
      :title="title"
      :width="dialogWidth"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="visible"
    >
      <el-form
        :model="form"
        ref="form"
        v-loading="loading"
        :rules="rules"
        :class="method==='view'?'readonly':''"
        :disabled="method==='view'"
        label-width="100px"
      >
        <el-row :gutter="15">
          <el-col :span="22">
            <el-form-item
              label="标题"
              prop="title"
            >
              <el-input
                v-model="form.title"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item
              label="发布时间"
              prop="publishTime"
            >
              <el-date-picker
                v-model="form.publishTime"
                style="width:100%;"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item
              label="排序选择"
              prop="sortOrder"
            >
              <el-input-number
                v-model="form.sortOrder"
                :step="1"
                step-strictly
                style="width:100%;"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item
              label="推送内容"
              prop="summary"
            >
              <el-input
                v-model="form.summary"
                type="textarea"
                placeholder="请输入"
                :rows="4"
              ></el-input>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="22">-->
          <!--            <el-form-item label="上传图片" prop="files">-->
          <!--              <el-upload action="https://jsonplaceholder.typicode.com/posts/"-->
          <!--                         list-type="picture-card"-->
          <!--                         :on-preview="handlePictureCardPreview"-->
          <!--                         :on-remove="handleRemove">-->
          <!--                <i class="el-icon-plus"></i>-->
          <!--              </el-upload>-->
          <!--              <el-dialog :visible.sync="dialogVisible">-->
          <!--                <img width="100%" :src="dialogImageUrl" alt="">-->
          <!--              </el-dialog>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="visible = false"
          icon="el-icon-circle-close"
        >取 消</el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          v-if="method != 'view'"
          @click="doSubmit()"
        >提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, getObj, addObj, putObj, delObj } from '@/api/information/notice/person'
export default {
  data () {
    return {
      title: '',
      method: '',
      visible: false,
      dialogWidth: '25%',
      loading: false,
      formLabelWidth: '80px',
      dialogImageUrl: '',
      dialogVisible: false,
      rules: {
        title: [
          { required: true, message: '请填写标题' }
        ],
        summary: [
          { required: true, message: '请填写推送内容' }
        ],
        sortOrder: [
          { required: true, message: '请填写排序' }
        ],
        publishTime: [
          { required: true, message: '请选择发布时间' }
        ],
      },
      file: '',
      form: {
        id: '',
        title: '',
        summary: '',
        sortOrder: 0,
        publishTime: '',
        msgType: 2,//(1.推送消息 2.公告消息 3.广告图片)
        sysNewFile: {
          fileId: ''
        },
      },
    }
  },
  components: {
  },
  methods: {
    init (method, id) {
      this.method = method
      this.form.id = id
      if (method === 'add') {
        this.title = `新建推送`
      } else if (method === 'edit') {
        this.title = '修改推送'
      } else if (method === 'view') {
        this.title = '查看推送'
      }
      this.visible = true;

      //获取详情
      this.loading = false
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        if (method === 'view' || method === 'edit') { // 查看
          //this.loading = true
          //this.$http({
          //  url: `/business/ct/ctContract/queryById?id=${this.form.id}`,
          //  method: 'get'
          //}).then(({ data }) => {
          //  this.form = this.recover(this.form, data.ctContract)
          //  this.loading = false
          //})
          this.form = id
        }
      })

    },
    // 表单提交
    doSubmit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let formdata = new FormData()
          for (var key in this.form) {
            if (this.form[key] || this.form[key] === 0) {
              formdata.append(key, this.form[key])
            }
          }
          formdata.append("file", this.file);
          if (this.form.id) {
            putObj(formdata).then(data => {
              this.$message.success('修改成功')
              this.visible = false
              this.$emit('refreshDataList')
            });
          } else {
            addObj(formdata).then(data => {
              this.$message.success('添加成功')
              this.visible = false
              this.$emit('refreshDataList')
            })
          }
        }
      })
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

  }
}</script>

